<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>mui-player 添加播放字幕</title>
        <link rel="stylesheet" href="../release/mui-player/dist/mui-player.min.css">
        <script src="./static/js/config.js"></script>
        <script src="../release/mui-player/dist/mui-player.min.js"></script>
        <script src="../release/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js"></script>
    </head>
    
	<body>
        <h3 style="text-align: center;">添加播放字幕</h3>
        <div id="mui-player" style="max-width: 700px;margin: auto"></div>
    </body>
    
    <script>
        var config = window.playerConfig;
        config.src = 'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/subtitleSource.mp4';
        config.poster = 'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/subtitle_poster.jpg';
        config.subtitle = {
            tracks:[
                {
                    kind:'subtitles',
                    src:'./static/subtitle/sintel-en.vtt',
                    label:'English',
                    srclang:'en',
                    default:true,
                },
                {
                    kind:'subtitles',
                    src:'./static/subtitle/sintel-de.vtt',
                    label:'德语',
                    srclang:'de',
                },
                {
                    kind:'subtitles',
                    src:'./static/subtitle/sintel-es.vtt',
                    label:'西班牙语',
                    srclang:'es',
                }
            ],
        }

        config.plugins = [
            typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({

            }) : {},
        ]
        
        console.log(config);
        var mp = new MuiPlayer(config);
    </script>
</html>